// 中间浮动的盒子
<template>
  <div class="wrapper">
    <section class="float-box">
      <header class="header">
        <div class="header-city" @click="$emit('clickGetAddress')">
          <span class="header-city-top">取还城市</span>
          <span class="header-city-bottom">{{city}}</span>
        </div>
        <div class="header-address" @click="$emit('clickAlsoAddress')">
          <span class="header-address-top">取还地址</span>
          <span class="header-address-bottom">{{area}}</span>
        </div>
      </header>
      <main class="main">
        <div class="get-car" @click="$emit('clickGetCar')">
          <span class="get-car-text">取车时间</span>
          <span class="get-car-day">{{
            timeData.get.data.day || defaultTimeData.get.day
          }}</span>
          <span class="get-car-time">
            <small>{{
              timeData.get.data.week || defaultTimeData.get.week
            }}</small>
            <small>{{
              timeData.get.data.hour || defaultTimeData.get.hour
            }}</small>
          </span>
        </div>
        <div class="times">
          <div class="box">{{timeDistance}}</div>
        </div>
        <div class="also-car" @click="$emit('clickAlsoCar')">
          <span class="also-car-text">还车时间</span>
          <span class="also-car-day">{{
            timeData.also.data.day || defaultTimeData.also.day
          }}</span>
          <span class="also-car-time">
            <small>{{
              timeData.also.data.week || defaultTimeData.also.week
            }}</small>
            <small>{{
              timeData.also.data.hour || defaultTimeData.also.hour
            }}</small>
          </span>
        </div>
      </main>
      <div class="button" @click="$router.push('/selectCarList')">立即选车</div>
      <footer class="footer">
        <div class="footer-left" @click="$emit('clickNoDeposit')">
          <img src="../../../assets/image/zhima-icon.png" />
          <span>取车时申请免押</span>
          <i class="iconfont icon-right"></i>
        </div>
        <div class="footer-right" @click="$router.push('/platformGuarantee')">
          <img src="../../../assets/image/ensure-icon.png" />
          <span>8重平台保障</span>
          <i class="iconfont icon-right"></i>
        </div>
      </footer>
    </section>
  </div>
</template>

<script>
export default {
  name: "FloatBox",
  props: {
    timeData: {
      type: Object,
      default() {
        return {};
      },
    },
    timeDistance: {
      type : String,
      default() {
        return "2天"
      }
    },
  },
  data() {
    return {
      // 默认的时间数据
      defaultTimeData: {
        get: {
          day: "",
          week: "",
          hour: "",
        },
        also: {
          day: "",
          week: "",
          hour: "",
        },
      },
    };
  },
  computed: {
    city () {
      return this.$store.state.address.address.city
    },
    area () {
      return this.$store.state.address.address.area
    }
  },
  methods: {
    // 初始化默认时间数据相关
    initTime() {
      let time = new Date();
      const weekList = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let week = time.getDay();
      let hour = time.getHours();
      this.defaultTimeData.get.day = month.toString() + "月" + day.toString() + "日";
      this.defaultTimeData.get.week = weekList[week];
      this.defaultTimeData.get.hour = String(hour) + "时";
      // 默认设置取车时间为两天后
      time.setDate(day + 2);
      month = time.getMonth() + 1;
      day = time.getDate();
      week = time.getDay();
      hour = time.getHours();
      this.defaultTimeData.also.day = String(month) + "月" + String(day) + "日";
      this.defaultTimeData.also.week = weekList[week];
      this.defaultTimeData.also.hour = String(hour) + "时";

      // 将初始数据存入vuex中
      this.$store.commit('address/changeDate', this.defaultTimeData)
    },
  },
  created() {
    // 调用初始化函数
    this.initTime();
    console.log(this.addressData);
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 86%;
  height: 235px;
  padding: 24px 15px;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  .float-box {
    .header {
      display: flex;
      height: 55px;
      border-bottom: 1px solid pink;
      .header-city {
        width: 50%;
        display: flex;
        flex-direction: column;
        &-top {
          font-size: 14px;
          color: #b2b2b2;
          margin-bottom: 5px;
        }
        &-bottom {
          font-size: 18px;
        }
      }
      .header-address {
        width: 50%;
        display: flex;
        flex-direction: column;
        &-top {
          font-size: 14px;
          color: #b2b2b2;
          margin-bottom: 5px;
        }
        &-bottom {
          font-size: 18px;
        }
      }
    }
    .main {
      width: 100%;
      height: 78px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 8px;
      .get-car {
        display: flex;
        flex-direction: column;
        align-items: center;
        &-text {
          font-size: 14px;
          color: #b2b2b2;
        }
        &-day {
          font-size: 18px;
          margin: 5px 0;
        }
      }
      .times {
        display: flex;
        align-items: center;
        justify-content: center;
        .box {
          font-size: 14px;
          color: #b2b2b2;
          width: 41px;
          height: 27px;
          text-align: center;
          line-height: 27px;
          border: 1px solid #b2b2b2;
          border-radius: 15px;
        }
      }
      .also-car {
        display: flex;
        flex-direction: column;
        align-items: center;
        &-text {
          font-size: 14px;
          color: #b2b2b2;
        }
        &-day {
          font-size: 18px;
          margin: 5px 0;
        }
      }
    }
    .button {
      height: 43px;
      background-color: rgb(216, 61, 61);
      color: white;
      text-align: center;
      line-height: 43px;
      border-radius: 10px;
      font-size: 18px;
      margin-top: 8px;
    }
    .footer {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 20px 0;
      &-left {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        img {
          width: 22px;
          height: 22px;
        }
      }
      &-right {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
</style>